import React, { Component } from 'react'

export default class JSXBaseDemo extends Component {

  state = {
    name: '双越',
    imgUrl: 'https://img2.sycdn.imooc.com/5a9fc8070001a82402060220-160-160.jpg',
    flag: true,
    // 判断条件
    theme: 'black',
    // 渲染列表
    list: [
      {
        id: 'id-1',
        title: '标题1'
      },
      {
        id: 'id-2',
        title: '标题2'
      },
      {
        id: 'id-3',
        title: '标题3'
      }
    ]
  }

  render() {
    // 获取变量 插值
    const pElem = <p>{this.state.name}</p>

    // 表达式
    const exprElem = <p>{this.state.flag ? 'yes' : 'no'}</p>

    // 子元素
    const imgElem = <div>
      <p>我的头像</p>
      <img src={this.state.imgUrl} alt="" />
    </div>

    // class
    // eslint-disable-next-line
    const classElem = <p className="title">设置 css class</p>

    // style
    const styleData = { fontSize: '30px', color: 'blue' }
    const styleElem = <p style={styleData}>设置 style</p>
    // 内联写法
    const styleElem2 = <p style={{ fontSize: '30px', color: 'blue' }}>设置 style</p>

    // 原生 html
    const rawHtml = '<span>富文本内容<i>斜体</i><b>加粗</b></span>'
    const rawHtmlData = {
      __html: rawHtml
    }
    const rawHtmlElem = <div>
      <p dangerouslySetInnerHTML={rawHtmlData}></p>
      <p>{rawHtml}</p>
    </div>

    // 加载组件
    /*
    const componentElem = <div>
      <p>JSX 中加载一个组件</p>
      <hr/>
      <List />
    </div>
    */

    // if else
    let conditionBtn
    const blackBtn = <button className="btn-black">black btn</button>
    const whiteBtn = <button className="btn-white">white btn</button>

    if (this.state.theme === 'black') {
      conditionBtn = blackBtn
    } else {
      conditionBtn = whiteBtn
    }

    // 三元运算符
    let choosedBtn = <div>
      {this.state.theme === 'black' ? blackBtn : whiteBtn}
    </div>

    // &&
    let choosedBtn2 = <div>
      {this.state.theme === 'black' && blackBtn}
    </div>

    // 列表渲染(v-for)
    const listRender = <ul>
      {
        this.state.list.map((item, index) => {
          // key 必填, 不能是 index 或 random
          return <li key={item.id}>index {index}; title {item.title}</li>
        })
      }
    </ul>

    return (
      <div>
        {pElem}
        {exprElem}
        {imgElem}
        {styleElem}
        {styleElem2}
        {rawHtmlElem}
        {conditionBtn}
        {choosedBtn}
        {choosedBtn2}
        {listRender}
      </div>
    )
  }
}
